<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Global wind visualization</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.css">
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    .hmap-control-zoom {
      right: 30px;
    }
  </style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.js"></script>
<script src="../ajax.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<!--<script src="../../../dist/ol3Echarts.js"></script>-->
<script>
  var map = new HMap('map', {
    target: 'map',
    view: {
      center: [113.53450137499999, 34.44104525],
      projection: 'EPSG:4326',
      zoom: 5, // resolution
    },
    baseLayers: [
      {
        layerName: 'ArcGIS',
        isDefault: true,
        layerType: 'TileXYZ',
        projection: 'EPSG:3857',
        label: {
          layerName: 'Label',
          isDefault: true,
          layerType: 'TileXYZ',
          projection: 'EPSG:3857',
          layerUrl: 'https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Reference/MapServer/tile/{z}/{y}/{x}'
        },
        layerUrl: 'https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}'
      }
    ]
  });
  var echartslayer = new ol3Echarts(null, {
    hideOnMoving: true,
    hideOnZooming: true
  });
  echartslayer.appendTo(map.getMap());
  getJSON('../../json/wind.json', function (windData) {
    var data = [];
    var p = 0;
    var maxMag = 0;
    var minMag = Infinity;
    for (var j = 0; j < windData.ny; j++) {
      for (var i = 0; i < windData.nx; i++, p++) {
        var vx = windData.data[p][0];
        var vy = windData.data[p][1];
        var mag = Math.sqrt(vx * vx + vy * vy);
        // 数据是一个一维数组
        // [ [经度, 维度，向量经度方向的值，向量维度方向的值] ]
        data.push([
          i / windData.nx * 360 - 180,
          j / windData.ny * 180 - 90,
          vx,
          vy,
          mag
        ]);
        maxMag = Math.max(mag, maxMag);
        minMag = Math.min(mag, minMag);
      }
    }
    var option = {
      title: {
        text: '风场',
        left: 'center',
        top: 'top',
        textStyle: {
          color: '#fff'
        }
      },
      visualMap: {
        left: 'left',
        min: minMag,
        max: maxMag,
        dimension: 4,
        inRange: {
          // color: ['green', 'yellow', 'red']
          color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        },
        realtime: false,
        calculable: true,
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          type: 'flowGL',
          data: data,
          particleDensity: 512,
          particleSpeed: 2,
          particleSize: 1,
          // gridWidth: windData.nx,
          // gridHeight: windData.ny,
          itemStyle: {
            opacity: 0.7
          }
        }
      ]
    };
    echartslayer.setChartOptions(option);
  });
</script>
</body>
</html>
